```html
<script setup>
  import * as rating from "@zag-js/rating-group"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"
  import { HalfStar, Star } from "./icons"

  const service = useMachine(rating.machine, { id: "1" })

  const api = computed(() => rating.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <label v-bind="api.getLabelProps()">Rate:</label>
    <div v-bind="api.getControlProps()">
      <span
        v-for="index in api.items"
        :key="index"
        v-bind="api.getItemProps({ index })"
      >
        <HalfStar v-if="api.getItemState({ index }).half" />
        <Star v-else />
      </span>
    </div>
    <input v-bind="api.getHiddenInputProps()" />
  </div>
</template>
```
